<template>
	<view class="container">
		<!-- <video class="banner-video" src="https://upos-sz-mirror08c.bilivideo.com/upgcxcode/86/63/4896386/4896386-1-208.mp4?e=ig8euxZM2rNcNbNgnwdVhwdlhbN3hwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1712145320&gen=playurlv2&os=08cbv&oi=2018263300&trid=c34f681e2c564c3191da9ef033d11c6bT&mid=3546655628462543&platform=html5&upsig=9d17e88376706b399403869c5fc8d478&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform&bvc=vod&nettype=0&bw=229984&orderid=0,1&buvid=&build=0&mobi_app=&f=T_0_0&logo=80000000"
			autoplay loop muted :controls="false" :show-fullscreen-btn="false"
			:enable-progress-gesture="false" object-fit="fill"></video> -->
		<image class="banner-video" :src="banner" mode="aspectFill"></image>
		<view class="h-drawer">
			<view class="h-drawer-header" @tap="toggleShow">
				<view class="banner-header text-white">
					<text class="text-xxl text-bold margin-left-xs">自家师傅 专业负责</text>
					<view class="subtitle">
						关于我们
						<view class="title-icon" :class="isShow?'show-icon':''">
							<uni-icons type="down" color="#000" size="16"></uni-icons>
						</view>
					</view>
					<image class="icon" src="/static/img/index-drawer.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="h-drawer-content__wrapper" :style="{height: isShow?'':'0rpx'}">
				<view class="h-drawer-content" :class="isShow?'h-drawer-content__show':''">
					<view class="padding text-xl bg-white radius-sm">
						<uParse :domain="baseUrl" :html="about" :tag-style="tagStyle"></uParse>
					</view>
				</view>
			</view>
		</view>
		<view class="introduce">
			<view class="bg-white padding radius-sm">
				<!-- <uParse :domain="baseUrl" :html="promise" :tag-style="tagStyle"></uParse> -->
				<view class="text-xl text-green text-bold text-center">
					福筑家来对客户的五大承诺
				</view>
				<view class="text-green">
					<view class="flex align-center margin-top-lg">
						<image class="introduce-icon unshrink" 
							src="/static/img/introduce_4.png" mode="widthFix"></image>
						<view class="unshrink margin-lr-sm text-lg text-bold">
							<view class="">虚假收费</view>
							<view class="">全额退款</view>
						</view>
						<view class="">
							正签后，出现“恶意虚增项目”、导致客户支付额外费用，全额返还虚增项目费用。
						</view>
					</view>
					<view class="flex align-center margin-top-lg">
						<image class="introduce-icon unshrink" 
							src="/static/img/introduce_5.png" mode="widthFix"></image>
						<view class="unshrink margin-lr-sm text-lg text-bold">
							<view class="">质量问题</view>
							<view class="">砸掉重做</view>
						</view>
						<view class="">
							出现《品质交付10项》中施工质量问题，砸掉重做。
						</view>
					</view>
					<view class="flex align-center margin-top-lg">
						<image class="introduce-icon unshrink" 
							src="/static/img/introduce_3.png" mode="widthFix"></image>
						<view class="unshrink margin-lr-sm text-lg text-bold">
							<view class="">投诉售后</view>
							<view class="">全年响应</view>
						</view>
						<view class="">
							客户咨询及时响应，2小时回应，48小时达成方案。
						</view>
					</view>
					<view class="flex align-center margin-top-lg">
						<image class="introduce-icon unshrink" 
							src="/static/img/introduce_2.png" mode="widthFix"></image>
						<view class="unshrink margin-lr-sm text-lg text-bold">
							<view class="">假冒伪劣</view>
							<view class="">双倍赔偿</view>
						</view>
						<view class="">
							所有材料如出现假货或质量伪劣产品，按该材料售价双倍赔偿。
						</view>
					</view>
					<view class="flex align-center margin-top-lg">
						<image class="introduce-icon unshrink" 
							src="/static/img/introduce_1.png" mode="widthFix"></image>
						<view class="unshrink margin-lr-sm text-lg text-bold">
							<view class="">延期一天</view>
							<view class="">赔偿一百</view>
						</view>
						<view class="">
							约定工期，因福筑家来原因，每延期1工作日，赔偿100元。
						</view>
					</view>
				</view>
			</view>
		</view>
		<swiper class="introduce-swiper" circular acceleration :current="currentBrand"
			previous-margin="160rpx" next-margin="160rpx" @change="handlerBrandChange">
			<swiper-item class="flex align-center" v-for="(item, index) in brandList" :key="index">
				<view class="introduce-item" :class="currentBrand==index?'current':''">
					<image class="item-img" :src="item.image" mode="aspectFit"></image>
					<view class="introduce-content">
						{{item.des}}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view v-if="contentList&&contentList.length>0" class="">
			<content-display :data="contentList"></content-display>
		</view>
		<!-- <view class="map-box">
			<scroll-view class="city-list__wrapper" scroll-x>
				<view class="city-list">
					<view class="city-item bg-shadow" :class="index==currentCity?'active':''"
						v-for="(city, index) in citys" :key="index"
						@tap="selectCity(city, index)">
						<view v-if="index==currentCity" class="icon">
							<uni-icons type="location" color="rgb(0, 123, 70)" size="20"></uni-icons>
						</view>
						<text>{{city.name}}</text>
					</view>
				</view>
			</scroll-view>
			<view class="margin">
				<map id="map"
					:longitude="citys[currentCity]&&citys[currentCity].lng||'119.216232'"
					:latitude="citys[currentCity]&&citys[currentCity].lat||'26.043743'"
					scale="10"
					:markers="markers">
				</map>
			</view>
			<view class="flex justify-center margin-top">
				<button class="cu-btn bg-green round store-btn lg"
					@tap="$tools.to('/pages/store/search')">查看更多门店</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { BASE_URL, initIndex } from '@/common/api/auth.js'
	import contentDisplay from '@/components/content-display.vue'
	import uParse from '@/components/jyf-parser/jyf-parser';
	export default {
		components: { contentDisplay, uParse },
		data() {
			return {
				CustomBar: this.CustomBar,
				baseUrl: BASE_URL,
				isShow: false,
				banner: '',
				about: '',
				promise: '',
				brandList: [],
				contentList: [],
				currentBrand: 0,
				citys: [{
					name: "北京",
					lat: 39.904179,
					lng: 116.407387
				},{
					name: "上海",
					lat: 31.230525,
					lng: 121.473667
				},{
					name: "广州",
					lat: 23.130061,
					lng: 113.264499
				},{
					name: "深圳",
					lat: 22.543527,
					lng: 114.057939
				},{
					name: "福州",
					lat: 26.074286,
					lng: 119.296411
				},{
					name: "重庆",
					lat: 29.563707,
					lng: 106.550483
				},{
					name: "成都",
					lat: 30.572961,
					lng: 104.066301
				}],
				currentCity: -1,
				markers: [{
					id: 1,
					latitude: '26.043743',
					longitude: '119.216232',
					title: '福州点',
					width: 16,
					height: 24,
					callout: {
						content: '福州店-距离0km',
						bgColor: '#007B46',
						padding: 6,
						fontSize: 14,
						color: '#fff',
						textAlign: 'center',
						display: 'ALWAYS',
						borderRadius: 999999
					}
				}],
				tagStyle: {
					img: 'width:100%;display:block;',
					table: 'width:100%',
					video: 'width:100%'
				},
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				const that = this
				initIndex().then(res => {
					if(res&&res.code==1) {
						let data = res.data
						that.banner = /^http(s)?:\/\/.+/.test(data.bannner)?data.bannner:that.baseUrl+data.bannner
						that.about = data.about
						that.promise = data.promise
						that.brandList = data.brand.map(item => {
							item.image = /^http(s)?:\/\/.+/.test(item.image)?item.image:that.baseUrl+item.image
							return item
						})
						that.contentList = data.item.map(item => {
							item.image = /^http(s)?:\/\/.+/.test(item.image)?item.image:that.baseUrl+item.image
							return item
						})
					}
				})
			},
			toggleShow() {
				this.isShow = !this.isShow
			},
			selectCity(city, index) {
				if(index !== this.currentCity) {
					this.currentCity = index
				}
			},
			handlerBrandChange(e) {
				let index = e.detail.current
				if(index !== this.currentBrand) {
					this.currentBrand = index
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		padding-bottom: 60rpx;
	}
	.banner-video {
		width: 100%;
		height: 900rpx;
	}
	.h-drawer {
		position: relative;
		margin: -80rpx 30rpx 30rpx;
		min-height: 240rpx;
		z-index: 99;
	}
	.h-drawer-content__wrapper {
		margin-top: -40rpx;
		margin-bottom: 40rpx;
		overflow: hidden;
	}
	.h-drawer-content {
		transform: translateY(-100%);
		transition: all .25s ease-in;
		/* background-color: rgb(0, 123, 73); */
		background-image: linear-gradient(to right, rgb(42, 177, 109), rgb(55, 186, 116), rgb(131, 205, 143) 50%, rgb(170, 218, 158), rgb(160, 214, 153), rgb(168, 218, 152));
		padding: 60rpx 16rpx 20rpx;
		border-radius: 0 0 30rpx 30rpx;
	}
	.h-drawer-content.h-drawer-content__show {
		transform: translateY(0%);
	}
	.banner-header {
		position: relative;
		width: 100%;
		height: 240rpx;
		padding: 60rpx 16rpx;
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% auto;
		z-index: 99;
	}
	.banner-header .subtitle {
		background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0));
		color: #000;
		padding: 18rpx 20rpx;
		border-radius: 20rpx;
		font-size: 32rpx;
		margin-top: 30rpx;
		font-weight: 700;
	}
	.banner-header .icon {
		position: absolute;
		width: 252rpx;
		height: auto;
		right: 20rpx;
		top: -20rpx;
		z-index: 999;
	}
	.introduce {
		margin: 30rpx;
		padding: 30rpx 16rpx;
		border-radius: 30rpx;
		background-color: rgb(0, 123, 73);
	}
	.introduce-icon {
		width: 72rpx;
		height: auto;
	}
	.list-item {
		margin: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 12rpx 12rpx rgba(60, 60, 60, .1);
	}
	.list-item .icon {
		width: 120rpx;
		height: auto;
	}
	
	.introduce-swiper {
		margin: 30rpx 0;
		height: 550rpx;
	}
	.introduce-item {
		width: 	90%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
	}
	.introduce-item.current {
		transform: scale(1.1);
	}
	.introduce-item .item-img {
		width: 460rpx;
		height: 360rpx;
		line-height: 1;
		margin: 0;
	}
	.introduce-item .introduce-content {
		padding: 20rpx;
		background-color: rgb(237, 109, 31);
		color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		line-height: unset;
		margin: 0;
	}
	.title-icon {
		display: inline-flex;
		width: 44rpx;
		height: 44rpx;
		font-weight: bold;
		line-height: 44px;
		border-radius: 50%;
		background-color: rgba(134, 205, 174, 1);
		text-align: center;
		margin-left: 16rpx;
		justify-content: center;
		align-items: center;
		transition: all .25s ease-in-out;
	}
	.title-icon.show-icon {
		transform: rotate(180deg);
	}
	.store-btn {
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(52, 150, 107, .6),
					0rpx 2rpx 2rpx 2rpx rgba(0, 123, 70, 1);
	}
	
	.city-list__wrapper {
		width: 100vw;
	}
	.city-list {
		display: flex;
		align-items: center;
		height: 120rpx;
		margin-left: 30rpx;
		gap: 30rpx;
	}
	.city-item {
		flex-shrink: 0;
		background-color: #fff;
		border-radius: 16rpx;
		border: 2rpx solid #fff;
		width: 150rpx;
		height: 80rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.city-item.active {
		border-color: rgb(0, 123, 73);
		background-color: rgb(226, 239, 230);
		color: rgb(0, 123, 73);
	}
	.city-item:last-child {
		margin-right: 30rpx;
	}
	.city-item.active .icon {
		margin-left: -8rpx;
	}
	
	#map {
		width: 100%;
		height: 440rpx;
	}
</style>